<template>
    <div class="login_warp">
        <div class="login_con">
            <div class="lheads">
                <div class=llogo @click="index">康</div>
                <div class="sun">
                <img src="../../../../assets/images/sun.gif" alt="糟糕!显示不出来" srcset="">
                </div>
                <h4>账号登录</h4>
                <form>
                    <div class="input"><input v-model="u_name" placeholder="请输入账号或邮箱号" v-focus=true /></div>
                <div class="pwd"><input v-model="u_pwd" placeholder="请输入密码" type="password"/></div>
                <div class="Verifi1"><input v-model="picLyanzhengma1" @blur="checkLpicma1" placeholder="验证" />
                <span @click="createCode1">{{checkCode1}}</span>
                </div>
                <div class="btn"><button type="submit" @click.prevent="llogin">登录</button></div> 
                <div class="btn"><button type="reset">重置</button></div> 
                <div class="remeber">
                     <label>
                    <input type="checkbox" v-model="userinfo" @click="repwd"/><span>记住密码</span>
                    <div class="show-box">
                    </div>
                    <div class="gou" v-show="hidd" ></div>
                </label>
                <div class="res" ><i>忘记密码？</i>|<i @click="res"> 立即注册</i></div>
                </div>
               
                </form>
                <transition
         leave-active-class="animated fadeOutDown">
            <span class="show2" v-if="show2" >
                {{msg2}}
                </span></transition>
                <transition
         leave-active-class="animated fadeOutDown">
            <span class="show3" v-if="show3">
                {{msg3}}
                </span></transition>
               
            </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
    data () {
        return {
            u_name:"",
            u_pwd:"",
            picLyanzhengma1:"", 
            checkCode1:"",
            msg2:"",
            msg3:"",
            show2:false,
            show3:false,
            judage1:false,
            // checked:true,
            userinfo:"",
            hidd:true,
            u_img:""    
   }       
        }
    ,
    mounted () {
        this.get();
        this.hidd=this.uhidd;
        
      let code = ""; 
      var codeLength = 4;//验证码的长度 
      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
         'S','T','U','V','W','X','Y','Z');
      for(var i = 0; i < codeLength; i++) {
       var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
       code += random[index];//根据索引取得随机数加到code上 
      } 
      this.checkCode1 = code; 
// console.log(this.uname,this.upwd);
        this.u_name=this.uname;
        this.u_pwd=this.upwd;

    },
    directives:
     {	    
         focus: 
         {	        
             inserted: function (el, {value})
              {	        	
                //   console.log(el,{value})
                if (value) 
                {	                
                    el.focus();
                }
    }	    
    }	
    }
,
    methods: {
        index()
        {
            this.$router.push("/")
        },
        ...mapActions(["set","get","setuser"]),
      
        repwd()
        {
            this.hidd=!this.hidd;
        },
        res()
        {
            this.$router.push("/resgister");
        },
        createCode1()
        {
        let code = ""; 
      var codeLength = 4;//验证码的长度 
      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
         'S','T','U','V','W','X','Y','Z');
      for(var i = 0; i < codeLength; i++) {
       var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
       code += random[index];//根据索引取得随机数加到code上 
      } 
      this.checkCode1 = code;
        },
        checkLpicma1()
        {
        this.picLyanzhengma1.toUpperCase();//取得输入的验证码并转化为大写   
//       console.log(this.picLyanzhengma1 == '');
    if(this.picLyanzhengma1 == '') {
      this.msg2="请输入验证码";
       this.judage1=false;
      }
    else if(this.picLyanzhengma1.toUpperCase() != this.checkCode1 ) { 
       this.msg2="验证码错误";
       this.judage1=false;
       this.createCode1();//刷新验证码 
       this.picLyanzhengma1 = '';
      }else {
       //输入正确时 
         this.msg2="";
        // console.log("验证码正确")
        this.judage1=true;
      } 
        this.show2=this.msg2.length>0?true:false;
        if(this.show2==true)
         {
             let that=this;
            //  console.log(this.show)
            setTimeout(function (){
                that.show2=false;
                }, 1000);
         }
        },
        llogin()
        {
          if(this.u_name&&this.u_pwd)
          {
                let self=this;
            this.$axios.post("http://127.0.0.1:8081/admin/logins",{
      u_name:this.u_name,
      u_pwd:this.u_pwd
    }).then(res=>{
         if(this.judage1===true)
        {
            console.log(res)
            if(res.data.status==1)
            {
                console.log("res",res.data)
                 self.u_img=res.data.img;
                // sessionStorage.setItem("userimg",self.u_img.u_img);
                 sessionStorage.setItem("username",self.u_name);
                 sessionStorage.setItem("userid",self.u_img.u_id);
                 sessionStorage.setItem("usersex",self.u_img.u_sex);

                this.setuser({u_name:self.u_name});
                // console.log(res.data.msg);
                this.show3=false;
                // sessionStorage.setItem("username",this.u_name);
                // this.setadmin(this.u_name);
                // console.log(res.data.img);
                console.log(this.hidd);
               if(self.hidd)
               {
                //    console.log("img",self.u_img);
                    self.set({u_name:self.u_name, u_pwd:self.u_pwd, u_time:7});
               }
               else{
 self.set({u_name:self.u_name, u_pwd:self.u_pwd, u_time:-1});
                //    this.huoqu({u_name:this.u_name,u_img:this.u_img});
               }
                 
                  this.$router.push({path:"/",query:{name:this.u_name}})
            }
            else{
                this.msg3=res.data.msg;
                console.log("show3")
                this.show3=true;
            }
        }
        else{
        }
        if(this.show3==true)
         {
             let that=this;
            //  console.log(this.show)
            setTimeout(function (){
                that.show3=false;
                }, 2000);
         }
    //    console.log(res)
      
    });
          }
         else{
           
         } 
        }
    },
    computed: {
        ...mapState(["uname","upwd","uhidd","uimg"])
    }

}
</script>

<style>
.login_warp{
        background: #f5f5f5;
    color: #757575;
        padding: 43px 0;
}
.login_con{
    background: #fff;
    width: 854px;
    height: auto;
    margin: 0 auto;
}
.lheads
{
    text-align: center;
    padding: 50px 0 22px;
    position: relative;
}
.lheads .llogo{
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background:  #ff6700;
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 28px;
    font-weight: bold;
    border-radius:5px 
}
.lheads h4{
    font-size: 30px;
    color: #424242;
    font-weight: normal;
    padding: 22px 0;
}
.input,.pwd,.btn,.btn1,.Verifi1{
    width: 350px;
    margin: 0 auto;
    margin-top:20px;
    box-sizing:border-box;   
}
.Verifi1{
    text-align: left;
}
.Verifi1 span{
    width: 100px;
     height: 50px;
    border: none;
    border: 1px #eee solid;
    padding:0 10px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    box-sizing:border-box;
    position: absolute;
    left:50%;
    box-sizing:border-box;   
    margin-left: 75px;
    color: #ff6700;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
.show2,.show3{
    position: absolute;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff
}
.show2{
    top:50%;
    left:50%;
    width: 100px;
    margin-left: -115px;
    margin-top: -10px;
}
.show3{
top:50%;
left: 50%;
width: 150px;
margin-left: -75px;
margin-top: -118px;
}
.remeber{
    width: 350px;
    margin: 0 auto;
    text-align: left;
    margin-top:20px;
    position: relative; 
}
/* .remeber .checked{
    width: 20px;
    height: 20px;
    border: 1px solid #eee;
    border-radius:2px; 
} */
.remeber label {
  position: relative;
  cursor: pointer;
}
 .remeber label input:checked + .show-box {
    background: #ec6337;
  }
   .remeber label input {
    cursor: pointer;
  }
.remeber span{
    display: block;
    width: 100px;
    font-size: 16px;
    position: absolute;
    top:0;
    left:28px;
}

  .show-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    background:#ff6700;  }
    /* 这里取个巧，与下面颜色一样而已 */

    .gou { 
         /* 使用了 absolute 所以无所谓是 before 还是 after */
      content: '';
      /* 空白内容占位，当做盒模型处理，见下面 */
      position: absolute;
      top: 3px;
      left: 7px;
      width: 4px;
        /* 勾的短边 */
      height: 10px; 
      /* 勾的长边 */
      border: solid white; 
      /* 勾的颜色 */
      border-width: 0 2px 2px 0; 
       /* 勾的宽度 */
      transform: rotate(45deg); 
       /* 定制宽高加上旋转可以伪装内部的白色勾 */
    }
 .res{
     position: absolute;
      top: 0;
     right:0
 }
 .res i:hover{
     color: #ff6700
 }
 .sun{
     position: absolute;
     right: 0;
     top:0;
     /* width: 100%; */
 }
 /* .sun img{
     width: 100%
 } */
/* .input1{
position: relative;
width: 60px;
left:-145px;
    margin: 0 auto;
    margin-top: 20px;
} */
/* .pwd1
{
   position: relative;
width: 210px;
left:-70px;
    margin: 0 auto; 
        margin-top: 20px;

} */
/* .lheads .pwd1 input{
width: 210px;
    height: 50px;
    border: none;
    border: 1px #eee solid;
    padding-left:10px;
    box-sizing:border-box; 
} */
/* .lheads .pwd1 .yanzhengma{
    position: absolute;
    width: 140px;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px #eee solid;
    border-left:none;
    box-sizing:border-box; 
} */
/* .input{
    margin-top:40px 
} */
.lheads .input input,.lheads .pwd input{
    width: 350px;
    height: 50px;
    border: none;
    border: 1px #eee solid;
    padding-left:10px;
    box-sizing:border-box; 
}
.lheads .Verifi1 input{
    width: 200px;
    height: 50px;
    border: none;
    border: 1px #eee solid;
    padding-left:10px;
    box-sizing:border-box;
}
.lheads .tou{
    display: inline-block;
    border: 1px #eee solid;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
    box-sizing:border-box;
    border-right: none
}
.lheads .input1 input{
box-sizing:border-box;
width: 290px;
height: 50px;
 border: 1px #eee solid;
 position: absolute;
 top:0;
 padding-left:10px 
}
.btn button{
    border: none;
    border:1px #eee solid;
    background: #ff6700;
    color: #fff;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 350px;
    font-size: 20px;
    letter-spacing: 20px;
    font-weight: bold
}
a,input,button{
outline:none;

}

</style>
